<template>
  <!-- 备注,这个提示组件多余 可移除-->
  <van-loading :color="loadingList.color" vertical>{{ loadingList.title }}</van-loading>
  <div class="mask" v-bind:class="{ 'bottom-mask': loadingList.isBottomMask }"></div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

interface LoadingList {
  title: string //提示信息
  color: string //加载颜色
  isBottomMask: boolean //是否遮住页面,只显示返回
}

export default defineComponent({
  // name: 'Loading',
  props: {
    loadingList: {
      type: Object as PropType<LoadingList>,
      require: true
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';
.van-loading {
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
// 遮罩层
.mask {
  width: 100%;
  height: calc(100% - 138px);
  background-color: transparent;
  position: fixed;
  top: 88px;
  left: 0;
  z-index: 1;
}
.bottom-mask {
  height: calc(100% - 88px);
  background-color: $background-color-base;
}
</style>
